<template>
  <el-dialog title="Json" v-model="visible" width="50%" :close-on-click-modal="false" draggable>
    <el-card shadow="always" style="width: 100%" class="word-wrap">
      <VueJsonPretty :data="formatJson()" showLineNumber="true" ></VueJsonPretty>
    </el-card>
    <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="copyJson()" icon="CopyDocument">{{ $t('edijob.copy') }}</el-button>
                <el-button type="danger" @click="visible = false" icon="Close">{{ $t('edijob.close') }}</el-button>
            </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {useI18n} from 'vue-i18n';
import commonFunction from "/@/utils/commonFunction";
import  VueJsonPretty  from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

const {t} = useI18n();
const visible = ref(false);
const errorMsg = ref("")
const jsonStr = ref()
const {copyText} = commonFunction();
// 打开弹框
const openDialog = (msg: any) => {
  visible.value = true;
  errorMsg.value = msg
};

//json格式化
const formatJson = () => {
  try {
    const parsed = JSON.parse(errorMsg.value);
    return parsed;
  } catch (error) {
    return errorMsg.value;
  }
}

//复制
const copyJson = () => {
  const textToCopy = errorMsg.value;
  copyText(textToCopy)
  // navigator.clipboard.writeText(textToCopy)
  //     .then(() => {
  //         useMessage().success(t("edijob.copySucess"));
  //     })
  //     .catch((error) => {
  //         useMessage().error(t("edijob.copyFail"));
  //     });
}

// 暴露变量
defineExpose({
  openDialog
});
</script>

<style scoped>
.word-wrap {
  white-space: pre-wrap;
  overflow-x: auto;

}
</style>

<style>
.vjs-value-string {
	    color: #0403e9;
}
</style>